<template>
  <div class="box">
    <div class="center" v-if="this.data">
      <span>
        当前位置:首页>
        <span @click="goBack">佳句赏析 </span>
        >{{ this.data[0].bname }}
      </span>
      <div class="book">
        <div class="right">
          <p class="item">
            {{ this.data[0].words }}
          </p>
          <span class="item"
            >——{{ this.data[0].author }}:《{{ this.data[0].bname }}》</span
          >
          <div class="bottom-item">
            <h3 class="bottom-left">
              发布人:{{ this.data[0].name }}
              <em
                @click="addGz(data[0].id)"
                v-once-click
                class="el-icon-message-solid"
              ></em>
            </h3>
            <span class="bottom-right">
              <em
                @click="addDatadz(data[0].id, data[0].wid)"
                v-once-click
                class="el-icon-trophy"
                >{{ this.data[0].dianzan }}</em
              >
              <em class="el-icon-chat-dot-round">{{ this.data[0].pinglun }}</em>
              <em class="el-icon-star-off">{{ this.data[0].shoucang }}</em>
            </span>
          </div>
        </div>
      </div>
      <hr />
      <div class="talk">
        <div class="top-top">
          <h2>热门评论</h2>
          <span class="top-up">
            我有一言,请诸位静听! <em class="el-icon-thumb"></em
          ></span>
        </div>
        <hr />
        <div v-for="items in this.chatData" :key="items.wstkid">
          <div class="down">
            <div class="uheader">
              <img :src="items.rphoto" alt="" />
            </div>
            <div class="utalks">
              <span class="uname">{{ items.rname }}</span>
              <span class="uword">{{ items.reply }}</span>
              <div class="time-pl">
                <span class="two">
                  <em
                    @click="addChatdz(items.reid, items.wid)"
                    v-once-click
                    class="el-icon-trophy"
                    >{{ items.rdianzan }}</em
                  >
                </span>
              </div>
            </div>
          </div>
          <hr />
        </div>
        <div class="pagination">
          <button @click="minusPage" :disabled="this.page == 1">上一页</button>
          <span>{{ page }}</span>
          <button @click="addPage" :disabled="this.maxPage == page">
            下一页
          </button>
          <span>共{{ maxPage }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      chatData: null,
      page: 1,
      maxPage: 1,
    };
  },
  mounted() {
    this.getData();
    this.getChat();
  },
  methods: {
    getData() {
      const url =
        `http://127.0.0.1:3000/v1/library/words/details/` +
        this.$route.params.id;
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
        console.log("this.length:", this.data.length);
      });
    },
    getChat() {
      const url =
        `http://127.0.0.1:3000/v1/library/wordschat/` + this.$route.params.id;
      console.log(url);
      this.axios.get(url).then((res) => {
        this.chatData = res.data;
        console.log("this.chatdata:", this.chatData);
        console.log("this.length:", this.chatData.length);
      });
    },
    addGz(id) {
      const url1 = "http://127.0.0.1:3000/v1/library/updateguanzhu";
      const params = `id=${id}`;
      console.log(url1, params);
      this.axios.put(url1, params).then((res) => {
        console.log("关注成功！");
      });
    },
    addDatadz(id, wid) {
      const url2 = "http://127.0.0.1:3000/v1/library/bestwords/updatedianzan";
      const params = `id=${id}&wid=${wid}`;
      console.log(url2, params);
      this.axios.put(url2, params).then((res) => {
        console.log("点赞成功！");
        this.getData();
      });
    },
    addChatdz(reid, wid) {
      const url3 =
        "http://127.0.0.1:3000/v1/library/bestwords/updatechatdianzan";
      const params = `reid=${reid}&wid=${wid}`;
      console.log(url3, params);
      this.axios.put(url3, params).then((res) => {
        console.log("点赞成功！");
        this.getChat();
      });
    },
    goBack() {
      this.$router.back();
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  user-select: none;
}
.box {
  width: 1200px;
  margin: 0 auto;

  .center {
    > span {
      display: inline-block;
      margin: 15px 20px;
    }

    .book {
      width: 1200px;
      display: flex;

      .right {
        width: 1200px;
        display: flex;
        flex-direction: column;
        span {
          display: flex;

          justify-content: flex-end;
        }
        .item {
          margin: 15px 20px;
        }
        .bottom-item {
          display: flex;
          justify-content: space-between;
          padding: 0 20px 15px 20px;
          .bottom-left > em {
            padding-left: 15px;
          }
          .bottom-right > em {
            padding-left: 15px;
          }
        }
        p {
          line-height: 150%;
          text-indent: 30px;
        }
      }
    }

    .talk {
      width: 1200px;

      .top-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 20px;
        .top-up {
          padding: 10px;
          border-radius: 5px;
          background-color: #46aaff;
          color: white;
        }
      }
      .down {
        width: 100%;
        display: flex;
        img {
          width: 50px;
          height: 50px;
          margin: 20px;
          border-radius: 50%;
        }
        .utalks {
          width: 100%;
          display: flex;
          flex-direction: column;
          .uname {
            font-size: 14px;
            color: #999;
            margin: 20px 0;
          }
          .uword {
            margin: 15px 0;
            padding-right: 20px;
          }

          .time-pl {
            width: 100%;
            display: flex;
            justify-content: flex-end;

            .two {
              em {
                padding: 0 20px 15px 0;
              }
            }
          }
        }
      }
      .more {
        text-align: center;
        // margin: 15px 0;
        padding: 15px 0;
      }
    }
  }
}

.pagination {
  text-align: center;
  padding: 15px;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}
</style>
